<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<title>css3编写浏览器背景渐变背景色</title>
		<style type="text/css">
*{margin:0;padding:0;}
body#wrap{width:100%;height:500px;
		</style>
	</head>

	<body id="wrap">
<script type="text/javascript" src="http://likexia.gitee.io/tools/lib/js/jquery.min.js"></script>
	<script type="text/javascript">
/* RGB 色盘变化
            1.rgb颜色的变化只有 ++ -- ；
            2.什么时候发生改变
            3.阈值和变化规律：
            {
                 if(R==255&&G==0){B++;}
                 if(B==255&&G==0){R--;}
                 if(B==255&&R==0){G++;}
                 if(R==0&&G==255){B--;}
                 if(G==255&&B==0){R++;}
                 if(R==255&&B==0){G--;}
            }
            4.数据分析归类
            {    
                 if(G==255&&B==0){R++;}
                 if(B==255&&R==0){G++;}
                 if(R==255&&G==0){B++;}
                 
                 if(G==0&&B==255){R--;}
                 if(B==0&&R==255){G--;}
                 if(R==0&&G==255){B--;} 
            }
            5.解决方案转化成代码
            {
                R , G , B
                var color=[R,G,B]
`               color[0]  //R
                利用数组操作原本应该是3个变量的值

                ++ , --
            }
    */

    (function(){
        var oWrap=document.getElementById('wrap');
        var max=220;  /*存储封值*/
        var min=180;      /*存储谷值*/
        var color=[max,min,min]; /*根据初始值红色来初始化数组*/
        var timer=null;
        var length=color.length;
        var colorL,colorR
        timer=setInterval(change,20);
        /*不容许在机组运行中直接修改代码*/
        function change(){
            /*在定时器中每过20毫秒 执行一次代码*/
            /*检测一次数组*/
            for(var i=0;i<length;i++){
                i%=length;
               var arrX=(i+1)%length;
               var arrY=(i+2)%length;
                if(color[i]==max&&color[arrX]==min){
                    color[arrY]++;
                }
                if(color[i]== min&&color[arrX]==max){
                    color[arrY]--;
                }
             colorL='#'+convert(color[0])+''+convert(color[1])+''+convert(color[2])+'';
            colorR='#'+convert(color[2])+''+convert(color[0])+''+convert(color[1])+'';
                    
                }
                gColor(colorL,colorR);
            }
        
        function convert(sRgb){ /*rgb转换成HEX*/
            var sRgb=sRgb;
            var sHex=sRgb.toString(16);
            sHex=sHex.length<2?'0'+sHex:sHex 
            /* 三目判断  判断条件 ？ 符合条件 ：不符合条件*/
            return sHex;
        }
        function gColor(colorL,colorR){
            if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(/MSIE [7|8|9].0/i)){
                //通过正则检测浏览器信息是否是ie 并且 ie版本是不是 7或者8或者9 之一
                oWrap.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr=" + colorL + ", endColorstr=" + colorR + ",GradientType=0 )";
            }else{
                oWrap.style.background='-webkit-linear-gradient(left,'+colorL+','+colorR+')' //谷歌
                oWrap.style.background='-ms-linear-gradient(left,'+colorL+','+colorR+')'  //ie 10 11
            }
         
        
        }
    })();
	</script>

	</body>

</html>